import React, { useState, useEffect } from 'react';
import {
  Card,
  List,
  Typography,
  Space,
  Button,
  message,
  Row,
  Col,
  Statistic,
} from 'antd';
import {
  MessageOutlined,
  EyeOutlined,
  PlusOutlined,
  TeamOutlined,
} from '@ant-design/icons';
import { Link } from 'react-router-dom';
import { getForumSections } from '../../api/forum';
import { ForumSection } from '../../types';
import { formatDateTime } from '../../utils/format';

const { Title, Text } = Typography;

const ForumSections: React.FC = () => {
  const [sections, setSections] = useState<ForumSection[]>([]);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    fetchSections();
  }, []);

  const fetchSections = async () => {
    try {
      const response = await getForumSections();
      if (response.code === 200) {
        setSections(response.data);
      }
    } catch (error) {
      console.error('获取论坛板块失败:', error);
      message.error('获取论坛板块失败');
    } finally {
      setLoading(false);
    }
  };

  return (
    <div>
      <Row gutter={16} style={{ marginBottom: 24 }}>
        <Col span={24}>
          <Card>
            <Row justify="space-between" align="middle">
              <Col>
                <Title level={2}>
                  <TeamOutlined /> 论坛
                </Title>
                <Text type="secondary">社区交流与讨论</Text>
              </Col>
              <Col>
                <Link to="/forum/new-topic">
                  <Button type="primary" icon={<PlusOutlined />}>
                    发表帖子
                  </Button>
                </Link>
              </Col>
            </Row>
          </Card>
        </Col>
      </Row>

      <Card title="论坛板块" loading={loading}>
        <List
          itemLayout="vertical"
          dataSource={sections}
          renderItem={(section) => (
            <List.Item
              key={section.id}
              style={{
                padding: '16px 0',
                borderBottom: '1px solid #f0f0f0',
              }}
            >
              <Row gutter={16} align="middle" style={{ width: '100%' }}>
                <Col span={16}>
                  <Space direction="vertical" size="small">
                    <Link to={`/forum/sections/${section.id}`}>
                      <Title level={4} style={{ margin: 0 }}>
                        {section.name}
                      </Title>
                    </Link>
                    <Text type="secondary">{section.description}</Text>
                    {section.lastPostAt && section.lastPostTitle && (
                      <Space size="small">
                        <Text type="secondary">最新:</Text>
                        <Text>{section.lastPostTitle}</Text>
                        <Text type="secondary">by {section.lastPostUser}</Text>
                        <Text type="secondary">{formatDateTime(section.lastPostAt)}</Text>
                      </Space>
                    )}
                  </Space>
                </Col>
                <Col span={8}>
                  <Row gutter={16}>
                    <Col span={24}>
                      <Statistic
                        title="帖子数"
                        value={section.topicCount || 0}
                        prefix={<MessageOutlined />}
                        valueStyle={{ fontSize: 16 }}
                      />
                    </Col>
                  </Row>
                </Col>
              </Row>
            </List.Item>
          )}
        />
      </Card>
    </div>
  );
};

export default ForumSections; 